<template>
  <el-table
    v-loading="$store.state.Site.listLoading"
    ref="loadTableRef"
    :data="dataList"
    @selection-change="selectionChange"
    style="width: 100%">
    <el-table-column
      v-if="selectDisplay"
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      v-if="indexDisplayLoad"
      fixed="left"
      type="index"
      label="序号"
      align="center"
      width="50">
    </el-table-column>
    <el-table-column
      v-for="(item,index) in tableConfig"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :fixed="item.fixed"
      :align="item.align || 'left'"
      :width="item.width || ''">
    </el-table-column>

    <el-table-column
      v-if="operationBar"
      fixed="right"
      label="操作"
      :align="tableConfig[0].align || 'center'"
      width="150">
      <template slot-scope="scope">
        <el-button type="text"
                   size="small"
                   v-for="(item,index) in operationBar.list"
                   :key="index"
                   @click="operationBarClick(scope.row,item.type)">
          {{ item.label }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
/**
 * 列表
 * @param tableConfig 列表的 key
 * @param dataList 列表的数据
 * @param operationBar 操作按钮
 * @param selectDisplay 选项框 default: false
 * @param indexDisplay 序号列 default: true
 *
 * return getListInfo 当前行的数据
 * return selectionChange 针对于带有选项框列
 */
export default {
  props: ['tableConfig', 'dataList', 'operationBar', 'selectDisplay', 'indexDisplay'],
  data() {
    return {
      indexDisplayLoad: false,
    }
  },
  mounted() {
    // 让 序号列默认显示
    if (typeof this.indexDisplay === 'undefined') {
      this.indexDisplayLoad = true
    }
    // 加载列表后默认显示出加载条
    this.$store.state.Site.listLoading = true
  },
  methods: {
    // 点击操作按钮
    operationBarClick(row, type) {
      const obj = {
        row,
        type,
      }
      // 将这条数据传递给父节点
      this.$emit('getListInfo', obj)
    },
    // 针对于带有选项框列
    selectionChange(val) {
      // 将这条数据传递给父节点
      this.$emit('selectionChange', val)
    },
  },
}
</script>

<style>

</style>
